<template>
  <div>
    <h3>没有使用modules</h3>
    <div>
      <h3> 
        state：  {{count}} -- {{newCount}}
      </h3>
      <h3> 
        num：  {{num}}
      </h3>
      <h3> 
        list：  {{list}}
      </h3>
      
      
    </div> 
       <button @click="add">++</button>
       ++==
       <button @click="init">异步actions</button>
    </div>

</template>

<script>
//mapstate 映射vuex中的State到当前组件          
//mapGetters 映射vuex中的Getters到当前组件          
//mapMutations 映射vuex中的Mutations到当前组件          
import { mapGetters, mapState,mapMutations,mapActions} from "vuex"
export default {
  computed: {
    // 扩展运算符 简写
    ...mapState(["count", "num", "list"]),
    ...mapGetters(['newCount']) 
    
   /* 相当于 
    count:mapState(["count"]).count,
    num:mapState(["num"]).num
    list:mapState(["list"]).list
     */
    },
  created() {
      
  },
    methods: {
      // 映射Mutations
      ...mapMutations(["add"]),
      // add() {
      //   this.$store.commit(
      //     "add"
      //   )
      // }
      // 映射Actions
      ...mapActions(["init"]),
      // init(){
      //   this.$store.dispatch("init")
      // }
    }


}
</script>

<style>

</style>